<template>
  <div class="report-detail" v-loading="loading">
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <div class="title-section">
          <h1>{{ formatDate(report.date) }} 工作日报</h1>
          <div class="meta-info">
            <span class="author">
              <el-avatar :size="24">
                {{ report.user?.username?.charAt(0).toUpperCase() }}
              </el-avatar>
              {{ report.user?.username }}
            </span>
            <span class="submit-time">
              提交时间：{{ formatDateTime(report.createdAt) }}
            </span>
            <span class="work-hours">
              工作时长：{{ report.workHours }}小时
            </span>
          </div>
        </div>
      </div>
      <div class="header-right">
        <el-button @click="exportReport">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
        <el-button @click="copyReport">
          <el-icon><CopyDocument /></el-icon>
          复制
        </el-button>
        <el-button type="primary" @click="editReport" v-if="canEdit">
          <el-icon><Edit /></el-icon>
          编辑
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button>
            <el-icon><MoreFilled /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="share">
                <el-icon><Share /></el-icon>
                分享日报
              </el-dropdown-item>
              <el-dropdown-item command="print">
                <el-icon><Printer /></el-icon>
                打印日报
              </el-dropdown-item>
              <el-dropdown-item command="delete" v-if="canDelete" divided>
                <el-icon><Delete /></el-icon>
                删除日报
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 日报概览 -->
    <div class="report-overview">
      <div class="overview-cards">
        <div class="overview-card">
          <div class="card-icon project">
            <el-icon><Folder /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-label">所属项目</div>
            <div class="card-value">{{ report.project?.name || '无项目' }}</div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon progress">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-label">完成进度</div>
            <div class="card-value">{{ report.progress }}%</div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon mood">
            <span class="mood-emoji">{{ getMoodEmoji(report.mood) }}</span>
          </div>
          <div class="card-content">
            <div class="card-label">工作心情</div>
            <div class="card-value">{{ getMoodText(report.mood) }}</div>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon time">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-label">工作时长</div>
            <div class="card-value">{{ report.workHours }}小时</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 日报内容 -->
    <div class="report-content">
      <div class="content-section">
        <h3>
          <el-icon><Document /></el-icon>
          工作内容
        </h3>
        <div class="work-content">
          <div class="content-text" v-html="formatContent(report.workContent)"></div>
          <div class="content-tags" v-if="report.tags && report.tags.length > 0">
            <span class="tags-label">标签：</span>
            <el-tag
              v-for="tag in report.tags"
              :key="tag"
              size="small"
              effect="plain"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <div class="content-section" v-if="report.achievements && report.achievements.length > 0">
        <h3>
          <el-icon><Trophy /></el-icon>
          今日成果
        </h3>
        <div class="achievements-list">
          <div
            v-for="(achievement, index) in report.achievements"
            :key="index"
            class="achievement-item"
          >
            <el-icon class="achievement-icon"><Check /></el-icon>
            <span>{{ achievement }}</span>
          </div>
        </div>
      </div>
      
      <div class="content-section" v-if="report.problems && report.problems.length > 0">
        <h3>
          <el-icon><Warning /></el-icon>
          遇到问题
        </h3>
        <div class="problems-list">
          <div
            v-for="(problem, index) in report.problems"
            :key="index"
            class="problem-item"
          >
            <el-icon class="problem-icon"><QuestionFilled /></el-icon>
            <div class="problem-content">
              <div class="problem-description">{{ problem.description }}</div>
              <div class="problem-solution" v-if="problem.solution">
                <strong>解决方案：</strong>{{ problem.solution }}
              </div>
              <div class="problem-status">
                <el-tag
                  :type="problem.status === 'solved' ? 'success' : problem.status === 'solving' ? 'warning' : 'danger'"
                  size="small"
                >
                  {{ getStatusText(problem.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-section" v-if="report.tomorrowPlan">
        <h3>
          <el-icon><Calendar /></el-icon>
          明日计划
        </h3>
        <div class="tomorrow-plan">
          <div class="plan-text" v-html="formatContent(report.tomorrowPlan)"></div>
        </div>
      </div>
      
      <div class="content-section" v-if="report.suggestions">
        <h3>
          <el-icon><ChatDotRound /></el-icon>
          建议反馈
        </h3>
        <div class="suggestions">
          <div class="suggestions-text" v-html="formatContent(report.suggestions)"></div>
        </div>
      </div>
    </div>
    
    <!-- 附件列表 -->
    <div class="attachments-section" v-if="report.attachments && report.attachments.length > 0">
      <h3>
        <el-icon><Paperclip /></el-icon>
        附件 ({{ report.attachments.length }})
      </h3>
      <div class="attachments-list">
        <div
          v-for="attachment in report.attachments"
          :key="attachment.id"
          class="attachment-item"
        >
          <div class="attachment-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="attachment-info">
            <div class="attachment-name">{{ attachment.name }}</div>
            <div class="attachment-meta">
              <span class="file-size">{{ formatFileSize(attachment.size) }}</span>
              <span class="upload-time">{{ formatDateTime(attachment.uploadTime) }}</span>
            </div>
          </div>
          <div class="attachment-actions">
            <el-button text @click="downloadAttachment(attachment)">
              <el-icon><Download /></el-icon>
              下载
            </el-button>
            <el-button text @click="previewAttachment(attachment)" v-if="canPreview(attachment)">
              <el-icon><View /></el-icon>
              预览
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 时间记录 -->
    <div class="time-records-section" v-if="report.timeRecords && report.timeRecords.length > 0">
      <h3>
        <el-icon><Timer /></el-icon>
        时间记录
      </h3>
      <div class="time-records">
        <div class="time-summary">
          <div class="summary-item">
            <span class="label">总工作时长：</span>
            <span class="value">{{ getTotalWorkTime() }}小时</span>
          </div>
          <div class="summary-item">
            <span class="label">有效工作时长：</span>
            <span class="value">{{ getEffectiveWorkTime() }}小时</span>
          </div>
          <div class="summary-item">
            <span class="label">工作效率：</span>
            <span class="value">{{ getWorkEfficiency() }}%</span>
          </div>
        </div>
        
        <div class="time-chart" ref="timeChart"></div>
        
        <div class="time-list">
          <div
            v-for="record in report.timeRecords"
            :key="record.id"
            class="time-record-item"
          >
            <div class="time-period">
              {{ formatTime(record.startTime) }} - {{ formatTime(record.endTime) }}
            </div>
            <div class="time-duration">
              {{ formatDuration(record.duration) }}
            </div>
            <div class="time-task">
              {{ record.task || '未指定任务' }}
            </div>
            <div class="time-type">
              <el-tag
                :type="record.type === 'work' ? 'success' : record.type === 'break' ? 'warning' : 'info'"
                size="small"
              >
                {{ getTimeTypeText(record.type) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相关任务 -->
    <div class="related-tasks-section" v-if="report.relatedTasks && report.relatedTasks.length > 0">
      <h3>
        <el-icon><Link /></el-icon>
        相关任务 ({{ report.relatedTasks.length }})
      </h3>
      <div class="related-tasks">
        <div
          v-for="task in report.relatedTasks"
          :key="task.id"
          class="task-item"
          @click="viewTask(task.id)"
        >
          <div class="task-status">
            <el-tag
              :type="getTaskStatusType(task.status)"
              size="small"
            >
              {{ task.status }}
            </el-tag>
          </div>
          <div class="task-info">
            <div class="task-title">{{ task.title }}</div>
            <div class="task-meta">
              <span class="task-priority">
                优先级：
                <el-tag
                  :type="getPriorityType(task.priority)"
                  size="small"
                  effect="plain"
                >
                  {{ task.priority }}
                </el-tag>
              </span>
              <span class="task-assignee" v-if="task.assignee">
                负责人：{{ task.assignee.username }}
              </span>
            </div>
          </div>
          <div class="task-progress">
            <el-progress
              :percentage="task.progress"
              :stroke-width="6"
              :show-text="false"
            />
            <span class="progress-text">{{ task.progress }}%</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评论区域 -->
    <div class="comments-section">
      <h3>
        <el-icon><ChatDotRound /></el-icon>
        评论 ({{ comments.length }})
      </h3>
      
      <!-- 添加评论 -->
      <div class="add-comment">
        <div class="comment-form">
          <el-input
            v-model="newComment"
            type="textarea"
            :rows="3"
            placeholder="写下你的评论..."
            maxlength="500"
            show-word-limit
          />
          <div class="comment-actions">
            <el-button @click="newComment = ''">取消</el-button>
            <el-button type="primary" @click="addComment" :disabled="!newComment.trim()">
              发表评论
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 评论列表 -->
      <div class="comments-list" v-if="comments.length > 0">
        <div
          v-for="comment in comments"
          :key="comment.id"
          class="comment-item"
        >
          <div class="comment-avatar">
            <el-avatar :size="32">
              {{ comment.user.username.charAt(0).toUpperCase() }}
            </el-avatar>
          </div>
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">{{ comment.user.username }}</span>
              <span class="comment-time">{{ formatDateTime(comment.createdAt) }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-actions">
              <el-button text size="small" @click="replyComment()">
                <el-icon><ChatDotRound /></el-icon>
                回复
              </el-button>
              <el-button
                text
                size="small"
                @click="deleteComment(comment.id)"
                v-if="canDeleteComment()"
              >
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
            
            <!-- 回复列表 -->
            <div class="replies" v-if="comment.replies && comment.replies.length > 0">
              <div
                v-for="reply in comment.replies"
                :key="reply.id"
                class="reply-item"
              >
                <div class="reply-avatar">
                  <el-avatar :size="24">
                    {{ reply.user.username.charAt(0).toUpperCase() }}
                  </el-avatar>
                </div>
                <div class="reply-content">
                  <div class="reply-header">
                    <span class="reply-author">{{ reply.user.username }}</span>
                    <span class="reply-time">{{ formatDateTime(reply.createdAt) }}</span>
                  </div>
                  <div class="reply-text">{{ reply.content }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div class="empty-comments" v-else>
        <el-empty description="暂无评论" :image-size="80" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import {
  ArrowLeft,
  Download,
  CopyDocument,
  Edit,
  MoreFilled,
  Share,
  Printer,
  Delete,
  Folder,
  TrendCharts,
  Clock,
  Document,
  Trophy,
  Check,
  Warning,
  QuestionFilled,
  Calendar,
  ChatDotRound,
  Paperclip,
  Timer,
  Link,
  View
} from '@element-plus/icons-vue'

const router = useRouter()

const loading = ref(false)
const newComment = ref('')
const timeChart = ref()

// 模拟日报数据
const report = ref({
  id: 1,
  date: new Date('2024-01-17'),
  user: { id: 1, username: '张三' },
  project: { id: 1, name: '项目管理系统' },
  workContent: '今天主要完成了用户登录功能的开发工作。\n\n具体包括：\n1. 前端登录页面的UI设计和实现\n2. 后端登录API接口的开发\n3. JWT token认证机制的集成\n4. 登录状态的前端管理\n5. 相关单元测试的编写\n\n在开发过程中，遇到了一些技术难点，但都得到了很好的解决。整体进度符合预期，代码质量良好。',
  workHours: 8,
  progress: 85,
  mood: 'happy',
  tags: ['开发', '前端', '后端', 'JWT', '测试'],
  achievements: [
    '完成用户登录页面UI设计',
    '实现后端登录API接口',
    '集成JWT认证机制',
    '编写相关单元测试',
    '解决跨域问题'
  ],
  problems: [
    {
      description: 'JWT token过期时间设置问题',
      solution: '调整token过期时间为24小时，并实现自动刷新机制',
      status: 'solved'
    },
    {
      description: '前端路由守卫逻辑复杂',
      solution: '重构路由守卫，简化逻辑结构',
      status: 'solving'
    }
  ],
  tomorrowPlan: '明天计划完成以下工作：\n\n1. 用户注册功能的开发\n2. 密码重置功能的实现\n3. 用户权限管理模块的设计\n4. 完善登录功能的错误处理\n5. 进行集成测试',
  suggestions: '建议团队统一代码规范，使用ESLint和Prettier进行代码格式化。同时建议增加代码审查流程，提高代码质量。',
  attachments: [
    {
      id: 1,
      name: '登录功能设计文档.pdf',
      size: 2048576,
      uploadTime: new Date('2024-01-17T18:00:00'),
      type: 'pdf'
    },
    {
      id: 2,
      name: '接口测试截图.png',
      size: 1024000,
      uploadTime: new Date('2024-01-17T18:15:00'),
      type: 'image'
    }
  ],
  timeRecords: [
    {
      id: 1,
      startTime: '09:00',
      endTime: '12:00',
      duration: 180,
      task: '前端页面开发',
      type: 'work'
    },
    {
      id: 2,
      startTime: '12:00',
      endTime: '13:00',
      duration: 60,
      task: '午休',
      type: 'break'
    },
    {
      id: 3,
      startTime: '13:00',
      endTime: '17:00',
      duration: 240,
      task: '后端API开发',
      type: 'work'
    },
    {
      id: 4,
      startTime: '17:00',
      endTime: '18:00',
      duration: 60,
      task: '测试和调试',
      type: 'work'
    }
  ],
  relatedTasks: [
    {
      id: 1,
      title: '用户登录功能开发',
      status: '进行中',
      priority: '高',
      progress: 85,
      assignee: { username: '张三' }
    },
    {
      id: 2,
      title: 'JWT认证集成',
      status: '已完成',
      priority: '中',
      progress: 100,
      assignee: { username: '张三' }
    }
  ],
  createdAt: new Date('2024-01-17T18:30:00')
})

// 评论数据
const comments = ref([
  {
    id: 1,
    user: { id: 2, username: '李四' },
    content: '工作进展很不错，JWT认证这块实现得很好！',
    createdAt: new Date('2024-01-17T19:00:00'),
    replies: [
      {
        id: 1,
        user: { id: 1, username: '张三' },
        content: '谢谢，还有一些细节需要优化',
        createdAt: new Date('2024-01-17T19:15:00')
      }
    ]
  },
  {
    id: 2,
    user: { id: 3, username: '王五' },
    content: '建议在token刷新机制上再考虑一下安全性',
    createdAt: new Date('2024-01-17T20:00:00'),
    replies: []
  }
])

// 权限检查
const canEdit = computed(() => {
  // 这里应该检查当前用户是否是日报作者或有管理权限
  return true
})

const canDelete = computed(() => {
  // 这里应该检查当前用户是否是日报作者或有管理权限
  return true
})

// 获取心情表情
const getMoodEmoji = (mood: string) => {
  const emojis: Record<string, string> = {
    'excited': '😄',
    'happy': '😊',
    'normal': '😐',
    'tired': '😴',
    'sad': '😢'
  }
  return emojis[mood] || '😐'
}

// 获取心情文本
const getMoodText = (mood: string) => {
  const texts: Record<string, string> = {
    'excited': '兴奋',
    'happy': '开心',
    'normal': '一般',
    'tired': '疲惫',
    'sad': '难过'
  }
  return texts[mood] || '一般'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    'solved': '已解决',
    'solving': '解决中',
    'pending': '待解决'
  }
  return texts[status] || status
}

// 获取任务状态类型
const getTaskStatusType = (status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    '待开始': 'info',
    '进行中': 'warning',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return types[status] || 'info'
}

// 获取优先级类型
const getPriorityType = (priority: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    '低': 'info',
    '中': 'warning',
    '高': 'danger'
  }
  return types[priority] || 'info'
}

// 获取时间类型文本
const getTimeTypeText = (type: string) => {
  const texts: Record<string, string> = {
    'work': '工作',
    'break': '休息',
    'meeting': '会议'
  }
  return texts[type] || type
}

// 格式化内容
const formatContent = (content: string) => {
  return content.replace(/\n/g, '<br>')
}

// 格式化日期
const formatDate = (date: Date) => {
  return dayjs(date).format('YYYY年MM月DD日')
}

const formatDateTime = (date: Date) => {
  return dayjs(date).format('MM-DD HH:mm')
}

const formatTime = (time: string) => {
  return time
}

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  return (size / (1024 * 1024)).toFixed(1) + ' MB'
}

// 格式化时长
const formatDuration = (minutes: number) => {
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  if (hours > 0) {
    return `${hours}小时${mins}分钟`
  }
  return `${mins}分钟`
}

// 获取总工作时间
const getTotalWorkTime = () => {
  const workRecords = report.value.timeRecords?.filter(r => r.type === 'work') || []
  const totalMinutes = workRecords.reduce((sum, record) => sum + record.duration, 0)
  return (totalMinutes / 60).toFixed(1)
}

// 获取有效工作时间
const getEffectiveWorkTime = () => {
  // 这里可以根据实际情况计算有效工作时间
  return getTotalWorkTime()
}

// 获取工作效率
const getWorkEfficiency = () => {
  const totalTime = report.value.timeRecords?.reduce((sum, record) => sum + record.duration, 0) || 0
  const workTime = report.value.timeRecords?.filter(r => r.type === 'work').reduce((sum, record) => sum + record.duration, 0) || 0
  if (totalTime === 0) return 0
  return Math.round((workTime / totalTime) * 100)
}

// 检查是否可以预览
const canPreview = (attachment: any) => {
  const previewTypes = ['image', 'pdf', 'txt']
  return previewTypes.includes(attachment.type)
}

// 检查是否可以删除评论
const canDeleteComment = () => {
  // 这里应该检查当前用户是否是评论作者或有管理权限
  return true
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 编辑日报
const editReport = () => {
  router.push(`/reports/${report.value.id}/edit`)
}

// 复制日报
const copyReport = () => {
  router.push('/reports/create')
  ElMessage.success('日报内容已复制，请修改后提交')
}

// 导出日报
const exportReport = () => {
  ElMessage.info('导出功能开发中...')
}

// 下拉菜单命令处理
const handleCommand = (command: string) => {
  switch (command) {
    case 'share':
      shareReport()
      break
    case 'print':
      printReport()
      break
    case 'delete':
      deleteReport()
      break
  }
}

// 分享日报
const shareReport = () => {
  ElMessage.info('分享功能开发中...')
}

// 打印日报
const printReport = () => {
  window.print()
}

// 删除日报
const deleteReport = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这份日报吗？删除后无法恢复。',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 这里应该调用API删除日报
    ElMessage.success('日报删除成功')
    router.push('/reports')
  } catch {
    // 用户取消删除
  }
}

// 下载附件
const downloadAttachment = (attachment: any) => {
  ElMessage.info(`下载 ${attachment.name}...`)
}

// 预览附件
const previewAttachment = (attachment: any) => {
  ElMessage.info(`预览 ${attachment.name}...`)
}

// 查看任务
const viewTask = (taskId: number) => {
  router.push(`/tasks/${taskId}`)
}

// 添加评论
const addComment = () => {
  if (!newComment.value.trim()) return
  
  const comment = {
    id: Date.now(),
    user: { id: 1, username: '当前用户' },
    content: newComment.value.trim(),
    createdAt: new Date(),
    replies: []
  }
  
  comments.value.unshift(comment)
  newComment.value = ''
  ElMessage.success('评论发表成功')
}

// 回复评论
const replyComment = () => {
  ElMessage.info('回复评论功能开发中...')
}

// 删除评论
const deleteComment = async (commentId: number) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条评论吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    comments.value = comments.value.filter(c => c.id !== commentId)
    ElMessage.success('评论删除成功')
  } catch {
    // 用户取消删除
  }
}

// 初始化时间图表
const initTimeChart = () => {
  if (!timeChart.value || !report.value.timeRecords) return
  
  const chart = echarts.init(timeChart.value)
  
  const data = report.value.timeRecords.map(record => ({
    name: record.task,
    value: [record.startTime, record.endTime, record.duration],
    itemStyle: {
      color: record.type === 'work' ? '#409eff' : record.type === 'break' ? '#e6a23c' : '#909399'
    }
  }))
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const [start, end, duration] = params.value
        return `${params.name}<br/>${start} - ${end}<br/>时长: ${formatDuration(duration)}`
      }
    },
    xAxis: {
      type: 'time',
      min: '09:00',
      max: '18:00'
    },
    yAxis: {
      type: 'category',
      data: ['时间轴']
    },
    series: [{
      type: 'custom',
      renderItem: (_params: any, api: any) => {
        const categoryIndex = api.value(1)
        const start = api.coord([api.value(0), categoryIndex])
        const end = api.coord([api.value(1), categoryIndex])
        const height = api.size([0, 1])[1] * 0.6
        
        return {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
          },
          style: api.style()
        }
      },
      data: data
    }]
  }
  
  chart.setOption(option)
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // 这里应该调用API加载日报详情
    // const reportData = await reportStore.fetchReportById(route.params.id)
    // report.value = reportData
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载日报详情失败:', error)
    ElMessage.error('加载日报详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
  nextTick(() => {
    initTimeChart()
  })
})
</script>

<style scoped>
.report-detail {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.back-btn {
  margin-top: 8px;
}

.title-section h1 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #333;
}

.meta-info {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.report-overview {
  margin-bottom: 24px;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.overview-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.card-icon.project {
  background: #409eff;
}

.card-icon.progress {
  background: #67c23a;
}

.card-icon.mood {
  background: #e6a23c;
  font-size: 24px;
}

.card-icon.time {
  background: #f56c6c;
}

.mood-emoji {
  font-size: 24px;
}

.card-content {
  flex: 1;
}

.card-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.card-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.report-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.content-section {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-text {
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.content-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 14px;
  color: #666;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 6px;
  border-left: 4px solid #67c23a;
}

.achievement-icon {
  color: #67c23a;
  font-size: 16px;
}

.problems-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.problem-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fef0f0;
  border-radius: 6px;
  border-left: 4px solid #f56c6c;
}

.problem-icon {
  color: #f56c6c;
  font-size: 16px;
  margin-top: 2px;
}

.problem-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.problem-description {
  color: #333;
  line-height: 1.4;
}

.problem-solution {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.tomorrow-plan,
.suggestions {
  line-height: 1.6;
  color: #333;
}

.plan-text,
.suggestions-text {
  white-space: pre-wrap;
}

.attachments-section,
.time-records-section,
.related-tasks-section,
.comments-section {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.attachments-section h3,
.time-records-section h3,
.related-tasks-section h3,
.comments-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  transition: all 0.3s;
}

.attachment-item:hover {
  border-color: #409eff;
  background: #f5f7fa;
}

.attachment-icon {
  color: #409eff;
  font-size: 20px;
}

.attachment-info {
  flex: 1;
}

.attachment-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.attachment-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 16px;
}

.attachment-actions {
  display: flex;
  gap: 8px;
}

.time-records {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.time-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 6px;
}

.summary-item {
  text-align: center;
}

.summary-item .label {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.summary-item .value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.time-chart {
  height: 200px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.time-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-record-item {
  display: grid;
  grid-template-columns: 120px 80px 1fr 80px;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.time-period {
  font-weight: 500;
  color: #333;
}

.time-duration {
  color: #409eff;
  font-weight: 500;
}

.time-task {
  color: #666;
}

.related-tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.task-item:hover {
  border-color: #409eff;
  background: #f5f7fa;
}

.task-info {
  flex: 1;
}

.task-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.task-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.task-progress {
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.add-comment {
  margin-bottom: 24px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  gap: 12px;
}

.replies {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid #ebeef5;
}

.reply-item {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-author {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.reply-time {
  font-size: 12px;
  color: #999;
}

.reply-text {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.empty-comments {
  text-align: center;
  padding: 40px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .time-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .meta-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .time-record-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .task-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .task-progress {
    width: 100%;
  }
}
</style>